<template>
    <div class="affix">
        <div class="affix-wrapper">
            <a class="affix-item back-to-top" v-show="showBackTop" @click="backTop" @mouseenter="v1 = true;" @mouseleave="v1 = false;">
                <Icon type="chevron-up"></Icon>
                <transition name="fade">
                    <a class="drop-out" v-show="v1">
                        <p>返回顶部</p>
                    </a>
                </transition>
            </a>
            <a class="affix-item qq-contact" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=276481348&site=qq&menu=yes" title="商务合作" alt="商务合作" @mouseenter="v2 = true;" @mouseleave="v2 = false;">
                <img src="../assets/images/icon/QQ.png"/>
                <transition name="fade">
                    <div class="drop-out" v-show="v2">商务合作</div>
                </transition>
            </a>
            <a class="affix-item qq-contact" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3281935475&site=qq&menu=yes" alt="业务咨询" title="业务咨询" @mouseenter="v3 = true;" @mouseleave="v3 = false;">
                <img src="../assets/images/icon/QQ.png"/>
                <transition name="fade">
                    <div v-show="v3" class="drop-out">业务咨询</div>
                </transition>
            </a>
            <div class="affix-item wechat-contact" @mouseenter="v4 = true;" @mouseleave="v4 = false;">
                <img src="../assets/images/icon/wechat.png"/>
                <transition name="scale">
                    <div class="drop-out" v-show="v4">
                        <img src="../assets/images/icon/qrcode2.png" width="150" alt="关注我们" title="关注我们"/>
                    </div>
                </transition>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    import $ from 'jquery';
    export default{
        data(){
            return{
                showBackTop:false,
                v1:false,
                v2:false,
                v3:false,
                v4:false
            }
        },
        mounted(){
            window.addEventListener('scroll',e=>{
                this.scrollToTop(e);
            })
        },
        methods:{
            scrollToTop(e){
                var scrollTop = $(document).scrollTop();
                if(scrollTop > 100){
                    this.showBackTop = true;
                }else{
                    this.showBackTop = false;
                }
            },
            backTop(){
                $(document).scrollTop(0)
            }
        }
    }
</script>
<style scoped>
    .affix-wrapper{ position: fixed; right:50px; bottom:50px; z-index: 111;}
    .affix-item{ width:40px; height:40px; display:flex; justify-content:center; align-items:center;  position: relative;}
    .affix-item:hover{ background:#15ccac; color:#fff;}
    .back-to-top{ background:#ccc;}
    .qq-contact,.wechat-contact{ background:#666; margin-top: 2px;}
    .drop-out{ position: absolute; right:40px; height:100%; padding:10px; white-space:nowrap; background:#666; color:#fff; line-height:24px; text-align:center;}
    .back-to-top .drop-out,.qq-contact .drop-out{ width:130px; }
    .drop-out:after{ content:''; width: 0; height: 0; border-width: 8px; border-style: dashed dashed dashed solid; border-color:transparent transparent transparent #666; position: absolute; right: -16px; top:50%; margin-top:-8px;}
    .drop-out img.promote{ display:none;}
    .wechat-contact .drop-out{ bottom:0; height:auto;}
    .wechat-contact .drop-out:after{ margin-top:0; top:inherit; bottom:10px;}
    .bounce-enter-active {
        animation: bounce-in .5s;
    }
    .bounce-leave-active {
        animation: bounce-in .5s reverse;
    }
    @media (max-width:1024px){
        .affix-wrapper{ right: 10px;}
    }
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }
</style>